<script setup>
import { ref, computed, onMounted } from 'vue'
import { userManager } from '@/utils/user'
import { rankManager } from '@/utils/rank'
import { creditManager } from '@/utils/credit'
import courseService from '@/services/courseService.js';

// const profileImage = ref(userManager.getUserImage() || 'https://via.placeholder.com/150')
// const username = ref(userManager.getUserName() || '用户名')
// const credit = ref(creditManager.getCurrentCredit())
// const rank = ref(rankManager.getRankByCredit(credit.value))
// const role = userManager.getRole()
// const courses = ref(12)
// const resources = ref(24)
// const userId = ref(userManager.getUserId())
// const email = ref(userManager.getUserEmail() || 'user@example.com')
// const birthDate = ref(userManager.getBirthDate())
// const credits = ref(250)
// const preferences = ref('编程、阅读、音乐')
// const major = ref('计算机科学')
// const registrationDate = ref('2023-01-15')

const props = defineProps({
  role: {
    type: String,
    default: ''
  }
});

const profileImage = ref(userManager.getUserImage() || 'https://via.placeholder.com/150');
const username = ref(userManager.getUserName() || '用户名');
const credit = ref(creditManager.getCurrentCredit());
const totalCredit=ref(creditManager.getTotalCredit());
const rank = computed(() => rankManager.getRankByCredit(totalCredit.value));
const userRole = ref(userManager.getRole());
const courses = ref(5);
const resources = ref(24);
const userId = ref(userManager.getUserId());
const email = ref(userManager.getUserEmail() || 'user@example.com');
const birthDate = ref(userManager.getBirthDate());
if (birthDate.value) {
  birthDate.value = birthDate.value.substring(0, 10);
} else {
  birthDate.value = '1990-01-01'; // 默认值
}

const credits = ref(creditManager.getCurrentCredit());
// 确保 preferences 从 userManager 获取并处理格式
const preferences = ref(userManager.getPreferences());
if (preferences.value && preferences.value.length > 0) {
  preferences.value = preferences.value.join('、');
} else {
  preferences.value = '无'; // 默认值
}

const major = ref(userManager.getMajor());
const registrationDate = ref('2023-01-15');

const displayRole = computed(() => {
  if (userRole.value === 'student') {
    return '学生';
  } else if (userRole.value === 'teacher') {
    return '教师';
  }
  if (props.role === 'student') {
    return '学生';
  } else if (props.role === 'teacher') {
    return '教师';
  }
  return '未知';
});
onMounted(async () => {
  if (userId.value) {
    if (userRole.value === 'student') {
      const res = await courseService.countSelectedCoursesByStudentId(userId.value);
      if (res.code ===1000) {
        courses.value = res.data;
      } else {
        console.error('获取学生选课数量失败:', res.message);
        courses.value = 0;
      }
    } else if (userRole.value === 'teacher') {
      const res = await courseService.countCoursesByTeacherId(userId.value);
      if (res.code ===1000) {
        courses.value = res.data;
      } else {
        console.error('获取教师创建课程数量失败:', res.message);
        courses.value = 0;
      }
    }
  }
});

</script>

<template>
  <div class="profile-container">
    <div class="profile-card">
      <div class="profile-avatar">
        <img :src="profileImage" alt="用户头像">
      </div>
      <div class="profile-info">
        <h2>{{ username }} <span class="badge">{{ rank }}</span></h2>
        <p class="user-role">{{ displayRole }}</p> <div class="stats">
        <div class="stat-item">
          <div class="stat-value">{{ credit }}</div>
          <div class="stat-label">学分</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ totalCredit }}</div>
          <div class="stat-label">总学分</div>
        </div>
      </div>
      </div>
    </div>

    <div class="info-section">
      <h3><i class="fas fa-user-circle section-icon"></i> 基本信息</h3>
      <div class="info-grid">
        <div class="info-item">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-envelope text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">邮箱</div>
            <div class="info-value">{{ email }}</div>
          </div>
        </div>

        <div class="info-item">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-id-card text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">身份类型</div>
            <div class="info-value">{{ displayRole }}</div> </div>
        </div>

        <div class="info-item">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-birthday-cake text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">出生日期</div>
            <div class="info-value">{{ birthDate }}</div>
          </div>
        </div>

        <div class="info-item">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-hashtag text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">账号ID</div>
            <div class="info-value">{{ userId }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="info-section">
      <h3><i class="fas fa-info-circle section-icon"></i> 详细信息</h3>
      <div class="info-grid">
        <div class="info-item" v-if="userRole === 'student'">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-graduation-cap text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">累计学分</div>
            <div class="info-value">{{ totalCredit }}</div>
          </div>
        </div>

        <div class="info-item" v-if="userRole === 'student'">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-heart text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">个人喜好</div>
            <div class="info-value">{{ preferences }}</div>
          </div>
        </div>

        <div class="info-item" v-if="userRole === 'teacher'">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-chalkboard-teacher text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">专业</div>
            <div class="info-value">{{ major }}</div>
          </div>
        </div>

        <div class="info-item">
          <div class="info-icon bg-orange-100">
            <i class="fas fa-calendar-check text-orange-600"></i>
          </div>
          <div class="info-content">
            <div class="info-label">账号注册时间</div>
            <div class="info-value">{{ registrationDate }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="social-section">
      <h3><i class="fas fa-share-alt section-icon"></i> 社交链接</h3>
      <div class="social-links">
        <a href="#" class="social-link github">
          <i class="fab fa-github"></i>
          <span>GitHub</span>
        </a>
        <a href="#" class="social-link gitee">
          <i class="fab fa-git-alt"></i>
          <span>Gitee</span>
        </a>
        <a href="#" class="social-link gitlab">
          <i class="fab fa-gitlab"></i>
          <span>GitLab</span>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

.profile-card {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #fff8f1 0%, #fff 100%);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.1);
  border: 1px solid #ffedd5;
  position: relative;
  overflow: hidden;
}

.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(to bottom, #409EFF, #409EFF);
}

.profile-avatar {
  position: relative;
  margin-right: 30px;
}

.profile-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffedd5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #409EFF;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid white;
  transition: all 0.3s ease;
}

.avatar-edit:hover {
  background: #ea580c;
  transform: scale(1.1);
}

.profile-info h2 {
  margin: 0 0 5px 0;
  font-size: 28px;
  color: #1e293b;
  display: flex;
  align-items: center;
}

.badge {
  background: #409EFF;
  color: white;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-left: 10px;
  font-weight: normal;
}

.user-role {
  margin: 0 0 15px 0;
  color: #64748b;
  font-size: 16px;
}

.stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #ffa600;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  margin-top: 5px;
}

/* 信息区域样式 */
.info-section {
  background: white;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffedd5;
}

.info-section h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #1e293b;
  display: flex;
  align-items: center;
}

.section-icon {
  color: #409EFF;
  margin-right: 10px;
  font-size: 24px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #ffedd5;
}

.info-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(249, 115, 22, 0.1);
  border-color: #fdba74;
}

.info-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 5px;
}

.info-value {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
}

.social-section {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffedd5;
}

.social-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link i {
  margin-right: 8px;
  font-size: 20px;
}

.social-link.github {
  background: #333;
}

.social-link.gitee {
  background: #c71d23;
}

.social-link.gitlab {
  background: #fc6d26;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-card {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
  }

  .profile-avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .profile-info h2 {
    justify-content: center;
  }

  .stats {
    justify-content: center;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>